<template>
<h3>流量分析</h3>
  <div class="echart">
    <div id="main" style="width: 1000px; height: 400px;margin:auto"></div>
    <div id="EachTerminal" style="width: 1000px; height: 400px;margin:auto"></div>
    <div class="DataDetails" style="width: 1000px;margin:auto">
      <h5>数据明细</h5>
      <el-table :data="tableData" style="width: 100%" height="250">
        <el-table-column fixed prop="irrigationDitch" label="渠道" width="150" />
        <el-table-column prop="Numberofvisitors" label="访客数" width="120" />
        <el-table-column prop="Visits" label="访问量" width="120" />
        <el-table-column prop="AverageVisits" label="平均访问次数" width="120" />
        <el-table-column prop="Percapitalengthofstay" label="人均停留时长" width="120" />
        <el-table-column prop="BounceRate" label="跳出率" width="120" />
        <el-table-column prop="Numberofconfirmedorders" label="确认订单人数" width="120" />
        <el-table-column prop="Numberofpayers" label="支付人数" width="120" />
        <el-table-column prop="ConversionRate" label="转化率" width="120" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
// tableData  



//1.导入echarts
import * as echarts from "echarts";

onMounted(() => {
  //2.实例化echarts
  var myChart = echarts.init(document.getElementById("main"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
      text: "数据",
      left: "center",
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      data: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11","12"],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [120, 456,200,768, 150, 789, 80, 100, 70, 110, 130,200,500],
        type: "bar",
      },
    ],
  });
});

onMounted(() => {
  var myChart = echarts.init(document.getElementById("EachTerminal"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      type: "category",
      data: ["00", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01", "01"],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [620, 682, 901, 934, 1290, 630, 1320,444,1111,999,523,1234],
        type: "line",
        smooth: true,
      },
    ],
  });
});
</script>

<style>
h3{
  padding: 20px;
}
.DataDetails{
  border: 1px rgba(161, 159, 159, 0.842) solid;
  border-radius: 10px;
  padding: 20px;
}
.DataDetails h5{
  margin-bottom: 30px;
}
</style>